<script setup lang="ts">
import { ref } from 'vue'
import { UserOutlined,AppstoreOutlined } from '@ant-design/icons-vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const selectedKeys = ref<string[]>([String(route.name || '')])

function onMenuClick(info: { key: string }) {
  if (!info?.key) return
  router.push({ name: info.key })
}

</script>

<template>
  <a-menu v-model:selectedKeys="selectedKeys" mode="inline" @click="onMenuClick">
    <a-menu-item key="adminCenter">
      <AppstoreOutlined />
      <span>总览</span>
    </a-menu-item>
    <a-menu-item key="UserManage">
      <user-outlined />
      <span>用户管理</span>
    </a-menu-item>
    <a-menu-item key="ProblemManage">
      <user-outlined />
      <span>题目管理</span>
    </a-menu-item>
    <a-menu-item key="OrganizationManage">
      <user-outlined />
      <span>组织管理</span>
    </a-menu-item>
    <a-menu-item key="ImagesManage">
      <user-outlined />
      <span>图片管理</span>
    </a-menu-item>

  </a-menu>
</template>

<style scoped>

</style>
